<html>
<head>
	<title>Gallery</title>
	<style type="text/css">
	body {
		font-family: "Helvetica","Arial",serif;
		color: #333;
		background-color: #ccc;
		margin: 1em 10%;
	}
	a {	
		text-decoration: none;
	}
	#imagegallery {
		list-style: none;
	}
	#imagegallery li {
		float: left;
		margin: 1em;
	}
	#imagegallery li a img {
		width: 100px;height: 80px;
		border-radius: 10px;
		border: 0;
		
	}
	img.small {
		
	}
	</style>
</head>
<body>
	<h1>SnapShots</h1>
	<ul id="imagegallery">
		<li>
			<a href="images/fireworks.jpg" title="A fireworks display" >
				<img src="images/fireworks.jpg" alt="fireworks" />
			</a>
		</li>
		<li>
			<a href="images/coffee.jpg" title="A cup of black coffee">
				<img src="images/coffee.jpg" alt="coffee" />
			</a>
		</li>
		<li>
			<a href="images/rose.jpg" title="A red, red rose">
				<img src="images/rose.jpg" alt="rose" />
			</a>
		</li>
		<li>
			<a href="images/bigben.jpg" title="The famous clock">
				<img src="images/bigben.jpg" alt="bigben">
			</a>
		</li>
	</ul>
	<img id="placeholder" src="images/placeholder.gif" alt="image gallery"/>
	<p id="description">Choose an image.</p>

	<script type="text/javascript">
	
	function prepareGallery() {
		var links = document.getElementsByTagName("a");
		for(var i = 0; i < links.length; i++) {
			// links[i].lastChild.className = "small";
			links[i].onclick = function() {
				return showPic(this);
			}
		}
	}

	function showPic(link) {
		var placeholder = document.getElementById("placeholder");
		var description = document.getElementById("description");

		var source = link.getAttribute("href");
		var title = link.getAttribute("title");
		placeholder.setAttribute("src", source);
		description.innerHTML = title;
		return false;
	}

	function addLoadEvent(func) {
		if (typeof window.onload != "function") 
			window.onload = func;
		else {
			var old = window.onload;
			window.onload = function() {
				old();
				func();
			}
		}

	}

	addLoadEvent(prepareGallery);
	</script>
</body>
</html>